let li_list = document.getElementsByTagName("li");
let ul = document.querySelector(".img_box>ul");
let arrow_left = document.querySelector(".arrow_left");
let arrow_right = document.querySelector(".arrow_right");
let dot_box = document.querySelector('.dot_box');
let dots = document.querySelectorAll(".dot_box>span");

// 初始值(用于控制轮播图)
let index = 1;
// 保存上一次操作的值
let lastIndex = 1;


function Ajax($method, $url, $parmas) {
  // 使用Promise
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    let str = "?";
    if ($parmas) {
      for (let key in $parmas) {
        str += `${key}=${$parmas[key]}&`;
      }
    };

    if ($method.toUpperCase() === "GET") {
      xhr.open($method, $url + str.slice(0, -1));
      xhr.send();
    } else {
      xhr.open($method, $url);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify($parmas));
    };

    xhr.addEventListener("readystatechange", function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // 返回成功
          resolve(JSON.parse(xhr.response));
        } else {
          // 返回错误
          reject(JSON.parse(xhr.response));
        }
      }
    });
  });
};


let url1 = "http://studentback.dfbuff.top/getMethod";
let parmas = {
  "type": "图片"
};

Ajax("GET", url1, parmas)
  .then(function (res) {

    dot_box.innerHTML = "";
    //   console.log(res.result);
    for (let i = 0; i < res.result.length; i++) {
  
      ul.innerHTML += `<li><a href="#"><img src="${res.result[i].content}"></a></li>`;
      (i == 0) && (dot_box.innerHTML += `<span class="dot dotActive" data-index=${(i + 1)*1}></span>`);
      (i >= 1) && (dot_box.innerHTML += `<span class="dot" data-index=${(i + 1)*1}></span>`);
      console.log(dot_box.innerHTML);


    }

    ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);

    ul.appendChild(ul.children[1].cloneNode(true));


    ul.style.transform = `translateX(-${index}00%)`;

    setTimeout(function () {
      ul.style.transition = "0.2s ease-in-out";
    }, 300);

    // 右箭头移动功能
    arrow_right.addEventListener("click", function () {

      ul.style.transform = `translateX(-${++index}00%)`;

      if (index === li_list.length - 1) {
        console.log("到达最后一张");

        index = 1;

        ul.addEventListener("transitionend", function () {
          console.log("过渡效果已经完成, 可以瞬间跳转");
          ul.style.transition = "none";
          ul.style.transform = `translateX(-${index}00%)`;
          window.getComputedStyle(ul, "style").transition;
          ul.style.transition = "0.2s ease-in-out";
        }, {
          once: true
        });
      };
      dotColor();
    });


    // 左边箭头移动功能
    arrow_left.addEventListener("click", function () {
      // ul平移自身100% * index
      ul.style.transform = `translateX(-${--index}00%)`;
      // 判断index是否到达第一张(无缝)
      if (index === 0) {
        console.log("到达第一张");
        // 瞬间回到倒数第二张图片(真正的最后一张)
        index = li_list.length - 2;
        // transitionend事件, 用于检测过渡效果是否完成
        ul.addEventListener("transitionend", function () {
          console.log("过渡效果已经完成, 可以瞬间跳转");
          // 关闭过渡效果
          ul.style.transition = "none";
          // 复位
          ul.style.transform = `translateX(-${index}00%)`;
          // 恢复过渡效果
          // getComputedStyle 获取css的最终样式 (获取完毕之后可以设置多次同个属性)
          window.getComputedStyle(ul, "style").transition;
          ul.style.transition = "0.2s ease-in-out";
        }, {
          // 设置一次事件, 避免出现同一个行为事件触发多次回调函数
          once: true
        });
      };
      // 切换小圆点颜色
      dotColor();
    });


    // 给小圆点绑定点击事件
    dots = document.querySelectorAll(".dot_box>span");
    dots.forEach(function (el) {
      el.addEventListener("click", function () {
        // 获取自定义的属性data-index, 这个值就是当前ul所要平移的值
        let dataIndex = el.dataset.index;
        // 当前操作的值赋值给index初始值
        index = dataIndex;
        ul.style.transform = `translateX(-${dataIndex}00%)`;
        // 切换小圆点颜色
        dotColor();
      });
    });

    // 小圆点颜色切换
    function dotColor() {
      dots = document.querySelectorAll(".dot_box>span");
      // 清除上一次操作的样式
      dots[lastIndex - 1].classList.remove("dotActive")
      // index 就是当前操作的下标
      dots[index - 1].classList.add("dotActive");

      // 将当前操作的index赋值lastIndex
      lastIndex = index;
    };


  })
  .catch(function (err) {
    console.log(err);
  })






//  document.activeElement()

  // Ajax().then()